﻿@page "/components/tabs"

<DocsPage>
    <DocsPageHeader Title="Tabs" />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Simple Tab">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-tabs">
                <TabsSimpleExample />
            </SectionContent>
            <SectionSource Code="TabsSimpleExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Centered">
                <Description>Use the <CodeInline>Centered</CodeInline> prop to keep your tabs in the middle.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsCenteredExample />
            </SectionContent>
            <SectionSource Code="TabsCenteredExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Scrolling Tabs">
                <Description>If the total size of all tabs exceeds the total size of the tabs container, buttons will be added for scrolling.<br />With the <CodeInline>AlwaysShowScrollButtons</CodeInline> prop, you can display the scroll buttons at all time.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsScrollExample />
            </SectionContent>
            <SectionSource Code="TabsScrollExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Custom Scroll Icons">
                <Description>The icons can be changed with the <CodeInline>PrevIcon</CodeInline> and <CodeInline>NextIcon</CodeInline> properties.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsCustomScrollIconsExample />
            </SectionContent>
            <SectionSource Code="TabsCustomScrollIconsExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Tabs Position">
                <Description>The position of the tab toolbar can be changed with the <CodeInline>Position</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-tabs">
                <TabsPositionExample />
            </SectionContent>
            <SectionSource Code="TabsPositionExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Icon Tabs">
                <Description>Icons can be used in addition to regular text in the tabs.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsIconAndTextExample />
            </SectionContent>
            <SectionSource Code="TabsIconAndTextExample" ShowCode="false" GitHubFolderName="Tabs" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Badges">
                <Description>Badges can be be applied to both icons and texts in the same way.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsWithBagdesExample />
            </SectionContent>
            <SectionSource Code="TabsWithBagdesExample" ShowCode="false" GitHubFolderName="Tabs" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Tooltip Tabs">
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsToolTipExample />
            </SectionContent>
            <SectionSource Code="TabsToolTipExample" GitHubFolderName="Tabs" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Set Active Panel">
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsSetActiveExample />
            </SectionContent>
            <SectionSource Code="TabsSetActiveExample" ShowCode="false" GitHubFolderName="Tabs" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Binding Selected Panel">
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsBindingExample />
            </SectionContent>
            <SectionSource Code="TabsBindingExample" ShowCode="false" GitHubFolderName="Tabs" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Simple Dynamic Tabs">
                <Description>A browser like tab experience, where uses can add new tabs and close existing ones. Add and Close needs to be provided as callbacks.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-tabs">
                <DynamicTabsSimpleExample />
            </SectionContent>
            <SectionSource Code="DynamicTabsSimpleExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
		 <DocsPageSection>
            <SectionHeader Title="Advanced Dynamic Tabs">
                <Description>
					<MudText Typo="Typo.body2">
						Allthough MudDynamicTabs allows a basic browser like tab experience, the way the style can be influenced is limited 
					</MudText>
					<MudText Typo="Typo.body2">
						 The Property Header and TabPanelHeader allows you to add any RenderFragement to the tab (Header) 
						 and to each tab panel (TabPanelHeader). The placement can be influenced by setting values to HeaderPosition or TabPanelHeaderPosition
					</MudText>
				</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-tabs">
                <CustomDynamicTabsExample />
            </SectionContent>
            <SectionSource Code="CustomDynamicTabsExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
